<template>
	<div class="background">
		<div class="zd-login">
			<el-form v-loading="loginLoading" :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="0px" class="login-form">
				<div class="zd-logo">
					<img src="./../../assets/logo.png">
				</div>
				<el-form-item prop="nameCode">
					<el-input v-model="ruleForm.nameCode" placeholder="请输入用户名" ref="nameCode">
						<i slot="prefix" class="iconfont icon-yonghu"></i>
					</el-input>
				</el-form-item>
				<el-form-item prop="pass">
					<el-input type="password" v-model="ruleForm.pass" auto-complete="off" placeholder="请输入密码" ref="pass">
						<i slot="prefix" class="iconfont icon-mima"></i>
					</el-input>
				</el-form-item>
				<div class="rememeber-me">
					<el-checkbox v-model="ruleForm.remember" style="float: left;">记住我</el-checkbox>
				</div>
				<el-button type="primary" @click="submitForm('ruleForm')" style="width: 100%;">登录</el-button>
			</el-form>
			<el-button round class="load-part" @click="loadAction">下载</el-button>
			<div class="noteOfLoad">
				<span>注意</span>
				<span>该处下载功能不需要用户登录也可以下载</span>
			</div>
			<div class="browerLimit">
				<span>
					<p>
						提示：
					</p>
					<article>
						为获得最佳性能，推荐使用<strong>Chrome</strong>,<strong>Edge</strong>或者<strong>Firefox</strong>等现代浏览器,建议在不低于1024*768分辨率下浏览。
					</article>
				</span>
			</div>
			<el-dialog title="正大项目文件下载" :visible.sync="dialogVisible"  width="50%">
				<div class="dialog-tip" >{{downloadTip}}</div>
				<ul class="dialog-content" v-loading="getPdfLoading">
					<li v-for="(val,key) in urlList" :key="key">
						<a :href="val">{{key}}</a>
					</li>									
				</ul>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			let checkName = (rule, value, callback) => {
				if(!value) {
					return callback(new Error('用户名不能为空'));
				} else {
					callback();
				}
			};
			let validatePass = (rule, value, callback) => {
				if(!value) {
					callback(new Error('请输入密码'));
				} else {
					callback();
				}
			};
			return {
				urlList:'', // pdf文件列表集合
				loginLoading: false,// 登录请求加载等待
				getPdfLoading: false,// 加载pdf url链接等待
				dialogVisible: false, // 点击下载背景遮罩
				downloadTip: '', // 下载文件提示语句
				ruleForm: {
					nameCode: '',
					pass: '',
					// 默认为记住当前用户输入
					remember: true
				},
				rules: {
					nameCode: [{
						validator: checkName,
						trigger: 'blur'
					}],
					pass: [{
						validator: validatePass,
						trigger: 'blur'
					}]
				}
			};
		},
		methods: {
			loadAction(){
				const self = this;
				//点击展示下载遮罩
				self.dialogVisible = true;
				// 加载等待
				self.getPdfLoading = true;	
				// 请求之前先清空列表数组
				self.urlList = [];						
				self.$axios.fetchPdfUrlData()
				.then(res => {
					// 对请求的返回值进行为空和不为空的处理
					if(!res.data.data){
						self.downloadTip = '暂无文件可供下载。。。';
					}else{
						self.downloadTip = '请点击下面的文件下载';
						// json数组构造为适合vue遍历循环的json数据格式
						const parsedJson = JSON.parse(res.data.data);
						let jsonArr = '{'
						parsedJson.forEach(valParent => {
							jsonArr = jsonArr + JSON.stringify(valParent).slice(1,-1) + ',';
						});
						jsonArr = jsonArr.slice(0,-1) + '}';
						self.urlList = JSON.parse(jsonArr);
					}
					// 结束加载等待
					self.getPdfLoading = false;
				})
				.catch(err => {
					// 结束加载等待
					self.getPdfLoading = false;
					
					//关闭下载遮罩
				    self.dialogVisible = false;
					self.$message.error(`${err}`);
				})
			},
			submitForm(formName) {
				const self = this;
				self.$refs[formName].validate((valid) => {
					if(valid) {
						// 显示请求等待
						self.loginLoading = true;
						// 请求登录接口
						self.$axios.fetchLoginInterface(self.ruleForm.nameCode, self.ruleForm.pass)
						.then(res => {
							// 隐藏请求等待
							self.loginLoading = false
							// 当请求成功时的处理逻辑					
							self.successLoginHandle(res);					
						})	
						.catch(err => {
							// 隐藏请求等待	
							self.loginLoading = false;				
							// 返回登录失败处理逻辑
							self.$message.error(`${err}`);
						})				
					}
				});
			},
			successLoginHandle(res){
				if(!res.data.success){
					throw new Error(res.data.message)
					return;
				}				
				// 如果返回值为空，则抛出错误
				if(!res.data.data){
					throw new Error('登录接口返回数据为空')
					return;
				}
				// remember复选处理
				if(this.ruleForm.remember){
					// 保存当前用户数据，为再次登录准备
					const loginMessage = {
						nameCode : this.ruleForm.nameCode,
						pass : this.ruleForm.pass
					}
					localStorage.setItem('loginMessage',JSON.stringify(loginMessage))
				} else {
					// 删除loginMessage
					localStorage.removeItem('loginMessage');
				}

				// 设置登录凭证
				const dateTime =new Date().getTime();
				const accessToken = sessionStorage.setItem('accessToken',dateTime);	

				// 返回值传入localStorage中，为下个接口调用进行参数准备
				const resData = JSON.stringify(res.data.data);
				localStorage.setItem('loginResData',resData)

				// 跳转到后台首页
				this.$router.push({
					path: '/Main'
				})

				// 登录成功提示
				this.$message.success('登录成功');
			}
		},
		mounted:function(){
			// 若从localStorage中读取到nameCode值，则填充到输入框中
			let loginMessage = localStorage.getItem('loginMessage');
			if(loginMessage){
					const localLoginMessage = JSON.parse(loginMessage)
					this.ruleForm.nameCode = localLoginMessage.nameCode;
					this.ruleForm.pass = localLoginMessage.pass;
					// 焦点为密码输入框
					this.$refs.pass.focus()
				} else {
					// 焦点为姓名输入框
					this.$refs.nameCode.focus()
			}
		}
	}
</script>

<style scoped lang="scss">
	.background{
		width:100vw;
		height: 100vh;
		background:url("./../../../static/img/zdBillBackground.jpg") center no-repeat;
		background-size: 100% 100%;
	}
	.zd-login {
		padding-top:150px;
  		text-align: center;		
	}
	.login-form {
		border-radius: 5px;
		background-clip: padding-box;
		margin:0 auto;
		width: 350px;
		padding: 25px;
		background: #fff;
		border: 1px solid #eaeaea;
		box-shadow: 0 0 25px #cac6c6;
		.zd-logo{
			height:70px;
			margin-bottom: 20px;
			display: flex;
			align-items: center;
			justify-content: center;
			img{
				height:70%;
			}
		}
		.rememeber-me {
			width: 100%;
			height: 40px;
			overflow: hidden;
		}
	}
	.load-part{
		margin:50px auto 0 auto;
		width:402px;
	}
	.dialog-tip{
		margin-bottom: 20px;
		font-size: 16px;
	} 
	.noteOfLoad {
		margin-top:1rem;
		span {
			font-size: .9rem;
			color:black;
		}
		span:first-of-type{
			font-weight: bold;
		}
	}
	.dialog-content{
		list-style: none;
		padding:0;
		a{
			display: block;
			height: 30px;
			border-bottom:1px dotted silver;
			font-size: 15px;
			&:hover{
				background:#eee;
			}
		}
	}
	.browerLimit{
		margin-top: 20px;
		width:70%;
		margin-left: 15%;
		span{
			display: flex;
			justify-content: center;
			color:black;
			line-height: 30px;
			p{
				font-weight: bold;
				white-space:nowrap;
			}	
			article{
				font-size: 15px;
			}
		}
	}
</style>